<template>
  <div>
    <div class="cont">
      <input
        class="inp"
        v-model="ele"
        type="text"
        placeholder="终端编号/批次号"
      />
      <el-button @click="search()">搜索</el-button>
      <!-- 上方按钮 -->
      <div class="top">
        <button @click="dialogFormVisible1 = true">新增</button>
        <button @click="open()">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column
            prop="terminalId"
            label="终端号"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="model" label="型号" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="protocol"
            label="通讯规约"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="companyTypeString"
            label="厂家"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="gather"
            label="采集方式"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            label="批次号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row),
                    (dialogFormVisible = true)
                "
                >修改</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="status"
            label="状态"
            width="100"
            filter-placement="bottom-end"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'warning'"
                v-text="scope.row.status === 1 ? '运行' : '在库'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 修改弹出层 -->
        <div class="block">
          <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="终端编号" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="terminalId" />
              </el-form-item>
              <el-form-item label="型号" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="model" />
              </el-form-item>
              <el-form-item label="通讯规约" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="protocol" />
              </el-form-item>
              <el-form-item label="厂家" prop="companyTypeString" label-width="120px">
                  <el-select
                    v-model="companyType"
                    placeholder="请选择厂家"
                  >
                    <el-option
                      v-for="item in table1"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select> </el-form-item
              >
              <el-form-item label="采集方式" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="gather" />
              </el-form-item>
              <el-form-item label="批次号" :label-width="formLabelWidth">
                <input class="inpe" type="text" v-model="batchNumber" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible = false), choose()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- 添加弹出层 -->
        <div class="add">
          <el-dialog title="添加" :visible.sync="dialogFormVisible1">
            <el-form :model="form">
              <el-col :span="12">
                <el-form-item
                  label="终端最小编号"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.max"
                    autocomplete="off"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="终端最大编号"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.min"
                    autocomplete="off"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="型号"
                  :label-width="formLabelWidth"
                  resetField
                >
                  <el-input v-model="form.model" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="通信规约"
                  :label-width="formLabelWidth"
                  resetField
                >
                  <el-input
                    v-model="form.protocol"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="厂家" :label-width="formLabelWidth" resetField>
                  <el-select
                    v-model="companyType"
                    placeholder="请选择厂家"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in table1"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select> </el-form-item
              >
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="采集方式"
                  :label-width="formLabelWidth"
                  resetField
                >
                  <el-input v-model="form.gather" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="批次号"
                  :label-width="formLabelWidth"
                  resetField
                >
                  <el-input
                    v-model="form.batchNumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="状态"
                  :label-width="formLabelWidth"
                  resetField
                >
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible1 = false), add()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  AssetsTerminal,
  GetTDelApi,
  GetTChangeApi,
  GetTAddApi,
  Dict,
} from "../request/api";
export default {
  data() {
    return {
      tableData3: [],
      table1:[],
      // table2:[],
      ele: "",
      newArr: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        //修改
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        // 添加
        max: "",
        min: "",
        model: "",
        protocol: "",
        companyType: "",
        gather: "",
        batchNumber: "",
      },
      formLabelWidth: "120px",
      terminalId: "",
      model: "",
      protocol: "",
      companyType: "",
      gather: "",
      batchNumber: "",
      id: "",
      currentPage: 1,
      total: 0,
      sizes: 10,
      val1: null,
      val2: null,
    };
  },
  created() {
    this.getList();
    Dict({dictType: "companyType"}).then((res)=>{
      this.table1 = res.data.data
    })
  },
  mounted() {},
  methods: {
    search() {
      AssetsTerminal({ terminalId: this.ele }).then((res) => {
        this.tableData3 = res.data.data.records;
        console.log(res);
        console.log(this.tableData3);
      });
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      GetTDelApi({ ids: arr3 }).then((res) => {
        this.msg(res);
        this.getList();
        if(res.data.code ==500){
          alert("登录已过期")
        this.$router.push("/")
      }
      });
    },
    handleSelectionChange(val) {
      // 获取id
      let newArr = val.map((item) => {
        return item.id;
      });
      this.newArr = newArr;
      console.log(this.newArr);
    },
    handleEdit(index, row) {
      this.id = row.id;
      this.terminalId = row.terminalId;
      this.model = row.model;
      this.protocol = row.protocol;
      this.companyType = row.companyType;
      this.gather = row.gather;
      this.batchNumber = row.batchNumber;
      console.log(row.terminalId);
    },
    choose() {
      GetTChangeApi({
        id: this.id,
        terminalId: this.terminalId,
        model: this.model,
        protocol: this.protocol,
        companyType: this.companyType,
        gather: this.gather,
        batchNumber: this.batchNumber,
      }).then((res) => {
        this.msg(res);
        this.getList();
      });
    },
    add() {
      GetTAddApi({
        firstId: this.form.max,
        lastId: this.form.min,
        model: this.form.model,
        protocol: this.form.protocol,
        companyType: this.form.companyType,
        gather: this.form.gather,
        batchNumber: this.form.batchNumber,
      }).then((res) => {
        this.msg(res);
        this.getList();
        this.form = "";
      });
    },
    handleSizeChange(val) {
      // console.log(val);
      this.val1 = val;
      AssetsTerminal({
        terminalId: this.terminalId,
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.val2 = val;
      AssetsTerminal({
        terminalId: this.terminalId,
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
      });
    },
    getList() {
      AssetsTerminal().then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
        console.log(res);
        console.log(this.tableData3);
      });
    },
    msg(res) {
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.data.msg,
          type: "error",
        });
      }
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style scoped lang="less">
.cont {
  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  .inp {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #f2fafe;
    border: none;
  }
  .inp::-webkit-input-placeholder {
    color: #acdbef;
  }
  .inp:focus{
    outline: none;
  }
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .inpe {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
  }
  .el-table {
    .el-table::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
<style lang='less'>
</style>
